<template>
  <div>
    <h2>Login</h2>
    <form @submit.prevent="handleLogin">
      <input v-model="username" placeholder="Username" required />
      <input v-model="password" type="password" placeholder="Password" required />
      
      <!-- Radio buttons for role selection -->
      <div>
        <label>
          <input type="radio" value="User" v-model="role" required /> User
        </label>
        <label>
          <input type="radio" value="Courier" v-model="role" /> Courier
        </label>
        <label>
          <input type="radio" value="Stuff" v-model="role" /> Stuff
        </label>
        <label>
          <input type="radio" value="Admin" v-model="role" /> Admin
        </label>
      </div>

      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      username: '',
      password: '',
      role: '' // Add role to the data model
    };
  },
  methods: {
    ...mapActions(['login']),
    async handleLogin() {
      // Include the role in the login payload
      await this.login({ 
        userId: this.username, 
        password: this.password,
        role: this.role 
      });
      
      if (this.$store.state.isAuthenticated) {
      // 根据角色的小写形式进行路由跳转
      const roleRoute = this.role.toLowerCase(); // 获取 role 的小写
      this.$router.push(`/${roleRoute}`);

      } else {
        alert('Login failed');
      }
    }
  }
};
</script>

  